<template> <div class="page-container">
  <div class="common-content">
  <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
   <div class="search-wrap">
    <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
     <el-form-item label="主键：">
      <el-input v-model="searchFilters.id" placeholder="请输入主键"></el-input>
     </el-form-item>
     <el-form-item label="部门ID：">
      <el-input v-model="searchFilters.deptId" placeholder="请输入部门ID"></el-input>
     </el-form-item>
     <el-form-item label="BD编码：">
      <el-input v-model="searchFilters.code" placeholder="请输入BD编码"></el-input>
     </el-form-item>
     <el-form-item label="BD名称：">
      <el-input v-model="searchFilters.name" placeholder="请输入BD名称"></el-input>
     </el-form-item>
     <el-form-item label="BD金额额度：">
      <el-input v-model="searchFilters.limited" placeholder="请输入BD金额额度"></el-input>
     </el-form-item>
     <el-form-item label="总金额：">
      <el-input v-model="searchFilters.total" placeholder="请输入总金额"></el-input>
     </el-form-item>
     <el-form-item label="可用金额：">
      <el-input v-model="searchFilters.available" placeholder="请输入可用金额"></el-input>
     </el-form-item>
     <el-form-item label="冻结金额：">
      <el-input v-model="searchFilters.frozen" placeholder="请输入冻结金额"></el-input>
     </el-form-item>
     <el-form-item label="创建时间：">
      <el-input v-model="searchFilters.createTime" placeholder="请输入创建时间"></el-input>
     </el-form-item>
     <el-form-item label="更新时间：">
      <el-input v-model="searchFilters.updateTime" placeholder="请输入更新时间"></el-input>
     </el-form-item>
     <el-form-item label="创建用户：">
      <el-input v-model="searchFilters.creator" placeholder="请输入创建用户"></el-input>
     </el-form-item>
     <el-form-item label="更新用户：">
      <el-input v-model="searchFilters.updater" placeholder="请输入更新用户"></el-input>
     </el-form-item>
     <el-form-item label="是否删除：0不删除， 1删除 ：">
      <el-input v-model="searchFilters.deleteFlag" placeholder="请输入是否删除：0不删除， 1删除 "></el-input>
     </el-form-item>
     <el-form-item label="RDC创建时间：">
      <el-input v-model="searchFilters.rdcCreateTime" placeholder="请输入RDC创建时间"></el-input>
     </el-form-item>
     <el-form-item label="开始日期：">
      <el-input v-model="searchFilters.startTime" placeholder="请输入开始日期"></el-input>
     </el-form-item>
     <el-form-item label="结束日期：">
      <el-input v-model="searchFilters.endTime" placeholder="请输入结束日期"></el-input>
     </el-form-item>
     <el-form-item label="状态（-3、双向冻结；-2、流入冻结，流出正常，-1、停用，0、初始化；1、启用；2、流入正常，流出冻结；）：">
      <el-input v-model="searchFilters.sts" placeholder="请输入状态（-3、双向冻结；-2、流入冻结，流出正常，-1、停用，0、初始化；1、启用；2、流入正常，流出冻结；）"></el-input>
     </el-form-item>
     <el-form-item label="申请原因：">
      <el-input v-model="searchFilters.applyReason" placeholder="请输入申请原因"></el-input>
     </el-form-item>
     <el-form-item label="审核（0-待审核；1-审核通过；2-审核拒绝；）：">
      <el-input v-model="searchFilters.auditSts" placeholder="请输入审核（0-待审核；1-审核通过；2-审核拒绝；）"></el-input>
     </el-form-item>
     <el-form-item label="审核原因：">
      <el-input v-model="searchFilters.auditReason" placeholder="请输入审核原因"></el-input>
     </el-form-item>
     <el-form-item label="当前动作（0-正常,1-修改,2-删除）：">
      <el-input v-model="searchFilters.currentAction" placeholder="请输入当前动作（0-正常,1-修改,2-删除）"></el-input>
     </el-form-item>
     <el-form-item label="申请人id ：">
      <el-input v-model="searchFilters.applierId" placeholder="请输入申请人id "></el-input>
     </el-form-item>
     <el-form-item label="审批id：">
      <el-input v-model="searchFilters.auditorId" placeholder="请输入审批id"></el-input>
     </el-form-item>
      <!-- 搜索区域按钮-查询,重置 -->
      <div class="tool-wrap">
       <div class="left-area">
        <el-button-group>
         <el-button type="primary" size="small" @click="findPage()">查询</el-button>
         <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
         <el-button type="primary" size="small" @click="addForm()">新增</el-button>
        </el-button-group>
       </div>
      </div>
      <!-- 表格数据部分 -->
      <div class="table-wrap">
       <jic-table
          :height="350"
          :operationWidth=300
          :tableList="tableList"
          :tableHeaderList="tableHeaderList"
          :totalSize="totalSize"
          :showDetailOperation=true
          :showEditOperation=true
          :showBatchDelete=false
          :showSelection=false
          :showIndex=false
          :showDeleteOperation=true
          @findPage="findPage"
          @handleDetail="handleDetail"
          @handleDelete="handleDelete"
          @handleEdit="handleEdit"
          @handleSizeChange="handleSizeChange"
          @handlePageChange="handlePageChange"
          ref="jicTable"
        ></jic-table>
      </div>
</el-form>
    </div>
   </div>
</div>
</template>
<script>
//一.导包区
import jicTable from '@/components/jicComponentGallery/jicTable'; 

//二.数据输出区
export default {

//===== 注册组件 =====
components: {
 jicTable,
},

//===== 数据初始化区=====
data() { return {

//===== 公共数据初始化 =====
pageIndex:0,//当前页数：首页；
pageSize:10,//每页记录数：10条记录；
totalSize:0,//总记录数：返回数据总条数
pageRequest: {pageNum: 1, pageSize: 10},     // 请求数据的参数
tableList: [],                               // 表格列表数据
searchSize: 'mini',

//=====表格表头数据=====
tableHeaderList: [
{prop: "id", label: "主键", minWidth: 100,formatter:null},
{prop: "deptId", label: "部门ID", minWidth: 100,formatter:null},
{prop: "code", label: "BD编码", minWidth: 100,formatter:null},
{prop: "name", label: "BD名称", minWidth: 100,formatter:null},
{prop: "limited", label: "BD金额额度", minWidth: 100,formatter:null},
{prop: "total", label: "总金额", minWidth: 100,formatter:null},
{prop: "available", label: "可用金额", minWidth: 100,formatter:null},
{prop: "frozen", label: "冻结金额", minWidth: 100,formatter:null},
{prop: "createTime", label: "创建时间", minWidth: 100,formatter:null},
{prop: "updateTime", label: "更新时间", minWidth: 100,formatter:null},
{prop: "creator", label: "创建用户", minWidth: 100,formatter:null},
{prop: "updater", label: "更新用户", minWidth: 100,formatter:null},
{prop: "deleteFlag", label: "是否删除：0不删除， 1删除 ", minWidth: 100,formatter:null},
{prop: "rdcCreateTime", label: "RDC创建时间", minWidth: 100,formatter:null},
{prop: "startTime", label: "开始日期", minWidth: 100,formatter:null},
{prop: "endTime", label: "结束日期", minWidth: 100,formatter:null},
{prop: "sts", label: "状态（-3、双向冻结；-2、流入冻结，流出正常，-1、停用，0、初始化；1、启用；2、流入正常，流出冻结；）", minWidth: 100,formatter:null},
{prop: "applyReason", label: "申请原因", minWidth: 100,formatter:null},
{prop: "auditSts", label: "审核（0-待审核；1-审核通过；2-审核拒绝；）", minWidth: 100,formatter:null},
{prop: "auditReason", label: "审核原因", minWidth: 100,formatter:null},
{prop: "currentAction", label: "当前动作（0-正常,1-修改,2-删除）", minWidth: 100,formatter:null},
{prop: "applierId", label: "申请人id ", minWidth: 100,formatter:null},
{prop: "auditorId", label: "审批id", minWidth: 100,formatter:null},
],

//=====搜索表单对应的数据对象初始化=====
searchFilters: {
 id:null,
 deptId:null,
 code:null,
 name:null,
 limited:null,
 total:null,
 available:null,
 frozen:null,
 createTime:null,
 updateTime:null,
 creator:null,
 updater:null,
 deleteFlag:null,
 rdcCreateTime:null,
 startTime:null,
 endTime:null,
 sts:null,
 applyReason:null,
 auditSts:null,
 auditReason:null,
 currentAction:null,
 applierId:null,
 auditorId:null,
},
//dialogVisible: false, //// 是否显示弹窗内容;
//editDialogVisible1: false,//// 是否可编辑弹窗内容;
//editLoading: false,////是否显示加载时动画效果;
}
},

//===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
mounted() {
 this.findPage();
},

//=====Vue.js 方法区=====
methods: {

//1.查询按钮：查询列表数据
findPage(pageNum) {
      // 传过滤器的参数
  let this_ = this;
  if (this_.searchFilters === undefined || this_.searchFilters === null) {
    this_.searchFilters = {};
  }
  
   this_.searchFilters.pageNum = pageNum === null || pageNum === undefined ? this.pageRequest.pageNum : pageNum;
   this_.searchFilters.pageSize = this.pageRequest.pageSize;
   this.utils.request.findConfBdApplyPage(this_.searchFilters, function (res) {
   if (res.code === "0000") {
     this_.tableList = res.data.list;
     this_.totalSize = Number(res.data.total);
   } else {
      this_.tableList = [];
      this_.totalSize = 0;
  }
  });
},

// 2.重置按钮：无条件查询搜索框条件
resetForm(formName) {
 this.searchFilters = {
};
 this.findPage(null);
},

// 3.详情按钮对应的方法
handleDetail(params) {
 this.$router.push({path: "/ConfBdApplyDetail/" ,query:{id:params.row.id,disabled:true}});
},

// 4.编辑按钮对应的方法
handleEdit(params) {
 this.$router.push({path: "/ConfBdApplyDetail/",query:{id:params.row.id,disabled:false}});
},

// 5.跳转到新增记录页面；
addForm(params) {
params ={row:{ id:null }};
 this.$router.push({path: "/ConfBdApplyDetail/",query:{id:params.row.id,disabled:false}});
},
// 6.每页记录数发生变化
handleSizeChange(params) {
 this.pageRequest.pageSize = params.size;
},

// 7.请求页数发生变化
handlePageChange(params) {
this.pageRequest.pageNum = params.number;
this.findPage();
},
// 8.页面弹窗处理方法
add() {
this.dialogVisible = true;
},

// 9.关闭弹窗
handleClose() {
this.dialogVisible = false;
},

// 10.删除按钮：删除选中的记录
handleDelete(data) {
 this.utils.request.deleteConfBdApply({id: data.row.id}, res => {
  if (res.data) {
   this.$message({message: '删除成功', type: 'success'});
   this.findPage();
  } else {
   this.$message({message: '删除失败', type: 'warning'});
  }
 });
}
//==========Vue.js自定义方法区==========





},
}
</script>
<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }
</style>
